<template>
	<view>
		<view id="head">
			<view class="iconfont icon-xiangzuo1" @click="goback"></view>
			<view class="headtext">修改资料</view>
			<view class="headicon">
				<text></text>
			</view>
		</view>
		<view id="mian">
			<view class="itemlist">
				<view class="itemtit">
					<text class="iconfont icon-fuzhushuxian" id="blueline"></text>
					<text>基本资料</text>
					<view class="hr"></view>
				</view>
				<view>
					<view class="item">
						<view class="space-between">
							<text>姓名</text>
							<input type="text" v-model="admindate.name" />
						</view>
						<view class="hr"></view>
					</view>
					<view class="item">
						<view class="space-between">
							<text>工号</text>
							<input type="text" v-model="admindate.work_id" />
						</view>
						<view class="hr"></view>
					</view>
					<view class="item1">
						<view id="aboutimg">
							<view class="images_box">
								<image :src="img" mode=""></image>
							</view>
							<button @click='uploadimage' id="upimg">上传</button>
						</view>
						<view class="hr"></view>
					</view>
					<view class="item">
						<view class="space-between">
							<text>入职时间</text>
							<input type="text" v-model="admindate.time" />
						</view>
					</view>
					<view class="item">
						<view class="space-between">
							<text>员工类型</text>
							<input type="text" v-model="admindate.type" />
						</view>
					</view>
				</view>
			</view>
			<view class="itemlist">
				<view class="itemtit">
					<text class="iconfont icon-fuzhushuxian" id="blueline"></text>
					<text>职位信息</text>
					<view class="hr"></view>
				</view>
				<view>
					<view class="item">
						<view class="space-between">
							<text>所属部门</text>
							<input type="text" v-model="admindate.department_name" />
						</view>
						<view class="hr"></view>
					</view>
					<view class="item">
						<view class="space-between">
							<text>岗位</text>
							<input type="text" v-model="admindate.post_name" />
						</view>
						<view class="hr"></view>
					</view>
					<view class="item">
						<view class="space-between">
							<text>直接上级</text>
							<input type="text" v-model="admindate.superior" />
						</view>
					</view>
				</view>
			</view>
			<view class="itemlist">
				<view class="itemtit">
					<text class="iconfont icon-fuzhushuxian" id="blueline"></text>
					<text>个人信息</text>
					<view class="hr"></view>
				</view>
				<view>
					<view class="item">
						<view class="space-between">
							<text>性别</text>
							<input type="text" v-model="admindate.sex" />
						</view>
						<view class="hr"></view>
					</view>
					<view class="item">
						<view class="space-between">
							<text>联系电话</text>
							<input type="text" v-model="admindate.phone" />
						</view>
						<view class="hr"></view>
					</view>
					<view class="item">
						<view class="space-between">
							<text>地址</text>
							<input type="text" v-model="admindate.address" />
						</view>
					</view>
					<view class="item">
						<view class="space-between">
							<text>身份证号</text>
							<input type="text" v-model="admindate.idcard" />
						</view>
					</view>
				</view>
			</view>
			<view><button type="default" @click="save">保存</button></view>
		</view>
	</view>
</template>

<script>
	import {
		computed,
		reactive,
		toRefs,
		onMounted
	} from 'vue';
	import $http from '../../utils/http.js'
	// import upimg from '../../utils/upimg.js'
	export default {
		setup() {
			let data = reactive({
				tabledate: [],
				admindate: [0, 1],
				meetroomdate: [],
				imglist: [],
				img: '',

				getdate: () => {
					$http({
						url: '/Meetmanagement/admin/get',
						method: 'post',
						data: {
							'userid': '200001'
						}
					}).then((res) => {
						data.admindate = res.data.data[0]
						console.log(res)
						console.log(data.admindate)
						data.img = data.admindate.figure
					})
				},
				goback: () => {
					uni.navigateBack({
						delta: 1
					})
				},
				save: () => {
					$http({
						url: '/Meetmanagement/admin/edi',
						method: 'post',
						data: data.admindate
					}).then((res) => {
						// data.admindate = res.data.data[0]
						console.log(res)
						// console.log(data.admindate)
					})
				},
				//*上传图片*//
				uploadimage: () => {
					uni.chooseImage({
						count: 1,
						success: (res) => {
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: 'http://192.168.1.44:8787/Meetmanagement/admin/api/upload', //post请求的地址
								filePath: tempFilePaths[0],
								name: 'avatar',
								formData: {
									'username': '200001' //formData是指除了图片以外，额外加的字段
								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes.data);
									console.log(123)
									//这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
									// var obj = JSON.parse(uploadFileRes.data);
									data.img = uploadFileRes.data
									data.admindate.figure = uploadFileRes.data
									// ...
								}
							})
						}

					})
				}
			})
			onMounted((option) => {
				// console.log(option)
				data.getdate()


			})
			return {
				...toRefs(data)
			}
		}
	}
	// const ctx = uni.createCanvasContext('actReview')
</script>

<style>
	@import url("~@/static/font/iconfont.css");

	#mian {
		background-color: #F2F2F2;
		padding: 24rpx 36rpx;
	}

	#head {
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		padding: 0rpx 36rpx;
		align-items: center;


	}

	.headtext {
		font-size: 40rpx;
	}

	.icon-xiangzuo1 {
		font-size: 50rpx;
	}

	.headicon>text {
		font-size: 50rpx;
		margin: 0 15rpx;
	}

	.itemlist {
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 0 30rpx;
		margin-bottom: 24rpx;
	}

	.item {
		height: 100rpx;
		/* line-height: 100rpx; */
		/* display: flex; */
		/* align-items: center; */
	}

	.itemtit {
		height: 100rpx;
		line-height: 100rpx;
	}

	.meetimg {
		width: 200rpx;
		height: 120rpx;
	}

	#blueline {
		color: #0000FF;
	}

	.space-between {
		display: flex;
		height: 100rpx;
		align-items: center;
		/* justify-content:space-between; */
	}

	.space-between>text {
		flex: 1;
	}

	.space-between>input {
		flex: 2;
		background-color: #F2F2F2;
	}

	#aboutimg {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.images_box {
		height: 300rpx;
		width: 500rpx;
		padding: 20rpx;
	}

	.images_box image {
		height: 300rpx;
		width: 450rpx;
	}

	#upimg {
		width: 200rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin: 0;
		padding: 0;
	}

	.hr {
		height: 1rpx;
		background-color: #F5F2F0;
	}
</style>
